<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN"　"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en" class="no-js">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1">
<title>智慧城市管理平台</title>
<link Rel="SHORTCUT ICON" href="/pc/login/img/logo1.png">

<link rel="stylesheet" type="text/css" href="/pc/login/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="/pc/login/css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="/pc/login/css/component.css" />
<link rel="stylesheet" href="/pc/login/css/index.css">
<link href="/pc/login/css/jquery.slider.css" rel="stylesheet" type="text/css"/>
<script src="/pc/login/js/jquery.min.js" type="text/javascript"></script>
<script src="/pc/login/js/jquery.slider.min.js" type="text/javascript"></script>
<!--[if IE]>
<script src="js/html5.js"></script>
<![endif]-->
<style>
input, button, select, textarea {
outline: none;
/*-webkit-appearance: none;*/
/*border-radius: 0;*/
border: 0;

}
/*.hide{
  display: none;
}*/
select,input:hover{
    background-color:rgba(255,255,255,0.5) !important ;
    color: #8B8878;
}
#deng,select,li:hover{
   cursor:pointer; 
}
button,input{
   border-radius: .7rem;
  height: 3em;
  /*-webkit-transition: all 300ms ease;
  transition: all 1000ms ease;*/
  /*transition-duration: 2s;*/
  width: 25rem;
 color: white;
  outline: none;
}
button{
   border: 0 !important;
}

.ys{
  color:whiet;
}

</style>
</head>
<body>
    <div class="container demo-1">
      <div class="z1">
        <div id="large-header" class="large-header">
          <canvas id="demo-canvas"></canvas>
         <div class="logo_box" id="dv2">           
           <div class="z2" style="position: relative;">
             <h3 style="font-weight: bold;font-size: 2.5em;    margin-top: -1.8em;margin-left: -0.8em">智慧城市管理平台</h3>
            <p id="deng" style="left: 11em;top: 2.5em;position: absolute;text-decoration:underline"><a href="/admin/login/index">已有账号 去登陆</a></p>
          </div>
       <div id="dq">   <!-- 忘记密码表单 -->
           <form action="/admin/login/alter" method="POST"  id="form4" onsubmit="return fn3()" >
            {{ csrf_field() }}
              <input type="hidden" name="user" value="{{ $userid }}">
                <input type="password" id="inp8" placeholder="请输入新密码" name="pwd" style="color: white;background: rgba(255,255,255,0.08);border: 1px solid #707070 "/>
                <p id="p9" style="position: absolute; left: 23.8em; top:3.2em; width: 40em;   font-size: 0.9em;color:#999;"></p>
                <input type="password" id="inp9"  placeholder="确认新密码" name="rpwd"  style="color: white;background: rgba(255,255,255,0.08);border: 1px solid #707070 "/>
                <p id="p10" style="position: absolute;left: 23.8em;top: 7.5em;width: 40em;font-size: 0.9em;color:#999;"></p>
                <div id="slider4" class="slider" style=" background: rgba(255,255,255,0.08);  border-radius: .7em;  margin-top: 0.4em;width: 25rem;height: 3em;"></div>          
              <button  id="btn4" style="border: 1px solid #707070;width: 25rem;height: 64px;font-size: 1.2em;margin-top: .8em" >修改密码</button>
           </form>
        </div>   
       </div>
      </div>
      </div>
    </div><!-- /container -->
    <script src="/pc/login/js/TweenLite.min.js"></script>
    <script src="/pc/login/js/EasePack.min.js"></script>
   
    <script src="/pc/login/js/demo-1.js"></script>
    
    <div style="text-align:center;">
        </div>
  </body>
  <script>

 $("#slider4").slider({
    callback: function(result) {
      $("#result1").text(result);
    }
  });

 // 修改密码表单验证
   var oPsd4 = document.getElementById('inp8');
var oPsdInfo4 = document.getElementById('p9');
oPsd4.onfocus = function () {
    oPsdInfo4.innerHTML = "*由6-24位数字/字母/符号组成";
}
function psdfn3() {
    if(oPsd4.value == ""){
        oPsdInfo4.innerHTML ="*密码不能为空";

        return false;
    }
    var regex4 = /^[\x21-\x7E]{6,24}$/;
    if(regex4.test(oPsd4.value) == true){
        oPsdInfo4.innerHTML ='<img src="/pc/login/img/success.png" style="height:16px ;width:16px" />';

        return true;
    } else {
        oPsdInfo4.innerHTML = "*密码格式不对";

        return false;
    }
}
oPsd4.onblur = psdfn3; 

// 密码确认
var oRpsd5 = document.getElementById('inp9');
var oRpsdInfo5 = document.getElementById('p10');
oRpsd5.onfocus = function(){
    oRpsdInfo5.innerHTML = "*确认密码";
}
function rpsdfn4() {
    if(oRpsd5.value == "") {
        oRpsdInfo5.innerHTML = "*确认密码不能为空";

        return false;
    }
    if(oRpsd5.value == oPsd4.value) {
        oRpsdInfo5.innerHTML = '<img src="/pc/login/img/success.png" style="height:16px ;width:16px" />';
        return true;
    } else {
        oRpsdInfo5.innerHTML = "*密码输入不一致";

        return false;
    }
}
oRpsd5.onblur = rpsdfn4;
// 修改密码判断跳转条件
function fn3() {
   
  if($("#slider4 > .ui-slider-wrap > .ui-slider-no-select").text()=="验证成功"){
       var res7 = psdfn3();
    var res8 = rpsdfn4();
    
    return res7 && res8;
    }else{
       
        return false;
    }
}
 
  </script>
     
</html>